/**
 * Created by Hejx on 2017/5/27.
 */

var online = {
    URL : {
        getOnlineData:function(){
            return "/admin/statistics/getOnlineData";
        },
        getNowOnlineData:function(){
            return "/admin/statistics/getNowOnlineNum";     //获取最近5分钟在线数据
        }
    },
    init:function(){
        common.initDateTimeRange();//  初始化时间控件
        var day = getNowFormatDate();
        $('#dateTimeRange').val(day+" 至 "+day);
        getData();  //请求后台数据 组装折线图

        getNowOnlineData(); //获取最近5分钟在线玩家
        setInterval(function () {
            //5分钟刷新一次
            getNowOnlineData();
        },60000*5);
    }
};

/**
 * 清除时间
 */
function begin_end_time_clear() {
    $('#dateTimeRange').val('');
    $('#beginTime').val('');
    $('#endTime').val('');
}


/**
 * 异步请求当前最新游戏在线人数
 */
var getNowOnlineData = function(){
    var time = "上次刷新时间: " + getNowFormatTime();
    $.ajax({
        url:online.URL.getNowOnlineData(),
        type:'GET', //GET
        async:false,    //或false,是否异步
        timeout:5000,    //超时时间
        dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
        success:function(data,textStatus,jqXHR){
            // console.log(data);
            // $("#nowOnline").html(data); 改为图表
            // nowPersonOption.series[0].data[0].name = '在线人数：'+ data.data.nowOnlinePerson;
            // nowPersonOption.series[0].data[0].value = data.data.nowOnlinePerson / data.data.maxOnlinePerson * 100;
            // nowPerson.setOption(nowPersonOption,true);
            //
            // nowRoomOption.series[0].data[0].name = '在线房间数：'+ data.data.nowOnlineRoom;
            // nowRoomOption.series[0].data[0].value = data.data.nowOnlineRoom / data.data.maxOnlineRoom * 100;
            // nowRoom.setOption(nowRoomOption,true);

            nowPerson.hideLoading();
            nowRoom.hideLoading();
            if(data.code!=0){
                layer.msg(data.msg);
                return false;
            }
            console.log(data);
            initnowPerson(data.data);
            initnowRoom(data.data);
            $("#flushTime1").html(time);
            $("#flushTime2").html(time);
        },
        error:function(xhr,textStatus){
            console.log('错误');
            console.log(xhr);
            console.log(textStatus);
            $("#flushTime1").html("警报警报！");
            $("#flushTime2").html("警报警报！");
        }
    })
};

/********************** 在线玩家数 *******************************/

var nowPerson = Highcharts.chart('nowPerson','macarons');

    var initnowPerson = function(data) {
        Highcharts.chart('nowPerson', {
            chart: {
                type: 'solidgauge'
            },
            title: null,
            pane: {
                center: ['50%', '90%'],
                size: '130%',
                startAngle: -90,
                endAngle: 90,
                background: {
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },
            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        y: 5,
                        borderWidth: 0,
                        useHTML: true
                    }
                }
            },
            yAxis: {
                min: 0,
                max: 20,
                title: {
                    text: null,
                    y: -70
                },
                stops: [
                    [0.1, '#ff8f96'],
                    [0.5, '#2EC7C9'],
                    [0.9, '#DF5353']
                ],
                lineWidth: 0,
                // minorTickInterval: null,
                tickPixelInterval: 200,
                tickWidth: 0,
                labels: {
                    y: 16
                }
            },
            tooltip: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [{
                name: '在线玩家数',
                title: null,
                dataLabels: {
                    format: '<div style="text-align:center">' +
                    '<span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">' + '{y}</span><br/>' +
                    '<span style="font-size:12px;color:silver">在线玩家数</span>' +
                    '</div>'
                },
                data:[data.nowOnlinePerson]
            }]

        });
    };





/********************** 在线房间数 *******************************/

var nowRoom = Highcharts.chart('nowRoom','macarons');

var initnowRoom = function(data) {
    Highcharts.chart('nowRoom', {
        chart: {
            type: 'solidgauge'
        },
        title: null,
        pane: {
            center: ['50%', '90%'],
            size: '130%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },
        yAxis: {
            min: 0,
            max: 20,
            title: {
                text: null
                //     y: -70
            },
            stops: [
                [0.1, '#ff8f96'],
                [0.5, '#2EC7C9'],
                [0.9, '#DF5353']
            ],
            lineWidth: 0,
            // minorTickInterval: null,
            tickPixelInterval: 200,
            tickWidth: 0,
            labels: {
                y: 16
            }
        },
        tooltip: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            name: '在线房间数',
            dataLabels: {
                format: '<div style="text-align:center">' +
                '<span style="font-size:25px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                '<span style="font-size:12px;color:silver">在线房间数</span>' +
                '</div>'
            },
            // data: [1]
            data: [data.nowOnlineRoom]
        }]
    });
};



/********************** 以下为折线图 *******************************/

var myChart = echarts.init(document.getElementById('main'),'macarons');
var colors = ['#5793f3', '#d14a61', '#675bba'];

var initChart = function(data){
    Highcharts.chart('main', {
        chart: {
            type: 'line'
        },
        title: {
            text:null
        },
        tooltip: {
            shared: true,
            crosshairs: [{
                width: 1,
                dashStyle: 'Dot',
                color: 'green'
            }]
        },
        credits: {
            enabled: false
        },
        legend: {
            align: 'center',
            verticalAlign: 'top'
        },
        xAxis: [
            {
                categories: data.xAxis,
                tickInterval: 3,
                labels: {
                    format: '{value}',
                        style: {
                            color:'#008ACD'
                    }
                }
            }
        ],
        yAxis: {
            title: {
                text:null
            },
            labels: {
                style: {
                    color:'#008ACD'
                }
            }
        },
        plotOptions: {
            spline: {
                marker: {
                enabled:true,
                radius: 0,
                lineColor: '#D14A61',
                fillColor:'#fff',
                symbol: 'circle', //曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，
                lineWidth: 1
                }
            },
            line: {
                dataLabels: {
                    enabled: true          // 开启数据标签
                },
                enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            }
        },
        series: [{
            name: '平均在线数量',
            type: 'spline',
            data:data.avgData,
            color: '#7CB5EC',
            tooltip: {
                valueSuffix: '个'
            }
        }, {
            name: '最高在线数量',
            type: 'spline',
            data:data.maxData,
            color: '#8085E9',
            tooltip: {
                valueSuffix: '个'
            }
        }]
    });
};

//请求后台数据
var getData = function(){
    var beginTime = $('#beginTime').val();
    var endTime = $('#endTime').val();
    var time = $('#dateTimeRange').val();
    /** 不知道怎么回事 首次进入页面点击今日时会出现beginTime endTime为空的情况 在这里特殊处理下 ***/
    if(beginTime==""||endTime==""){
        //2017-05-26 至 2017-05-26
        beginTime = time.substring(0,10);
        endTime = time.substring(13);
    }
    myChart.showLoading();
    roomChart.showLoading();
    $.ajax({
        url : online.URL.getOnlineData(),
        type:'POST',
        async:true,    //或false,是否异步
         data:{
             beginTime:beginTime,endTime:endTime
        },
        timeout:5000,    //超时时间
        dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
        success:function(data,textStatus,jqXHR){
            myChart.hideLoading();
            roomChart.hideLoading();
            if(data.code!=0){
                layer.msg(data.msg);
                return false;
            }
            console.log(data);
            // var obj = JSON.parse(data); // --> parse error
            // console.log(data);
            initChart(data.data.person);
            initRoomChart(data.data.room);
        },
        error:function(xhr,textStatus){
            myChart.hideLoading();
            roomChart.hideLoading();
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        }
    })
};


/***************** 在线房间 *******************/

var roomChart = echarts.init(document.getElementById('room'),'macarons');

var initRoomChart = function(data){
     Highcharts.chart('room', {
        chart: {
            type: 'line'
        },
       title: {
           text:null
       },
        tooltip: {
            shared: true,
            crosshairs: [{
                width: 1,
                dashStyle: 'Dot',
                color: 'green'
            }]
        },
        credits: {
            enabled: false
        },
        legend: {
            align: 'center',
            verticalAlign: 'top'
        },
        xAxis: {
                categories: data.xAxis,
                tickInterval: 3,
            labels: {
                style: {
                    color: '#008ACD',
                    // fontSize:'12px'
                }
            }
            },
        yAxis: {
            title: {
                text:null
            },
            labels: {
                style: {
                    color:'#008ACD',
                    // fontSize:'12px'
                }
            }
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled:true,
                    radius: 0,
                    lineColor: '#435AEE',
                    fillColor:'#fff',
                    symbol: 'circle', //曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，
                    lineWidth: 1
                }
            },
            line: {
                dataLabels: {
                    enabled: true          // 开启数据标签
                },
                enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            }
        },
        series: [{
            name: '平均在线数量',
            type: 'spline',
            data:data.avgData,
            color: '#2EC7C9',
            tooltip: {
                valueSuffix: '个'
            }
        }, {
            name: '最高在线数量',
            type: 'spline',
            // data: [ 0, 0, 0, 0, 13, 1.9, 0]
            data:data.maxData,
            color: '#D87A80',
            tooltip: {
                valueSuffix: '个'
            }
        }]
    });
};

window.onresize = function () {
    myChart.resize();
    roomChart.resize();
    // nowPerson.resize();
    // nowRoom.resize();
};









